.login-panel {
  position: relative;

  img {
    margin-right: .25em;
    position: relative;
    top: .1em;
  }

  .popup-menu {
    position: absolute;
    background-color: #fff;
    padding: .5em 0 0 0;
    border: .14em solid #666666;
    border-radius: 1em;
    z-index: 10;

    right: -1em;
    top: 1.5em;
    box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.3);

    &:after, &:before {
      bottom: 100%;
      right: 2em;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;

    }

    &.login,
    &.restore {
      &:after, &:before {
        right: 6em;
      }
    }

    &:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: #fff;
      border-width: 1em;
      margin-left: -1em;
    }
    &:before {
      border-color: rgba(0, 125, 204, 0);
      border-bottom-color: #666666;
      border-width: 1.2em;
      margin-right: -0.18em;
    }

    li {
      list-style-type: none;

      &:not(.submit) {
        padding: .1em .4em;
        border: 1px solid #ccc;
        margin: 1em 1em;

        label {
          display: block;
          font-size: .8em;
          color: #ccc;
        }

        input {
          width: 14em;
          box-sizing: content-box;
          font-size: 1em;
          border: none;
          padding: 0;
        }
      }

      &.no-border {
        border: none;
        padding: .1em 0;
      }

      &.submit {
        padding: 0;
        border: 1px solid transparent;
        margin: 1em 1em;

        button {
          position: relative;
          box-sizing: content-box;
          width: 14em;
          font-size: 1.1em;
          color: #333;
          background: #41cc72;
          padding: .5em 0;
          border-radius: 0 0 0.5em 0.5em;
          border: 1px solid #11863A;
          margin: 0;

          &:hover {
            background: #49e47f;
          }

          &:active {
            top: 2px;
            background: #34a15a;
          }
        }
      }
    }

    &.user-menu {
      li {
        border: none;

        a {
          white-space: nowrap;
        }
      }
    }
  }
}
